<template>
	<view class="container">
		<view class="items">
			<view class="item_table">
				设备ID
			</view>
			<view class="item_input">
				<input class="inputs_item" v-model="nickname" auto-focus placeholder=" 请输入您的设备ID"
					placeholder-class='placeholder' />
			</view>
		</view>
		<view class="items">
			<view class="item_table">
				罐装桶ID
			</view>
			<view class="item_input">
				<input class="inputs_item" v-model="nickname" auto-focus placeholder=" 请输入您的罐装桶ID"
					placeholder-class='placeholder' />
			</view>
		</view>
		<view class="items">
			<view class="item_table">
				会员姓名
			</view>
			<view class="item_input">
				<input class="inputs_item" v-model="nickname" auto-focus placeholder=" 请输入您的会员姓名"
					placeholder-class='placeholder' />
			</view>
		</view>
		<view class="items">
			<view class="item_table">
				会员电话
			</view>
			<view class="item_input">
				<input class="inputs_item" v-model="nickname" auto-focus placeholder=" 请输入您的会员电话"
					placeholder-class='placeholder' />
			</view>
		</view>
		
		<button class="register">确认注册</button>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	@import '@/common/sass/all/all.scss';
	.items{
		margin-top: 18rpx;
		display: flex;
		flex-direction: row;
		
		.item_table{
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			width: 160rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			border-radius: 15rpx;
			background: linear-gradient(to right top, rgba(18, 178, 160, 1.0), rgba(18, 147, 160, 1.0));
		}
		.item_input{
			width: 518rpx;
			height: 72rpx;
			line-height: 72rpx;
			background-color: #FFFFFF;
			
			.inputs_item{
				min-height: 72rpx;
				margin-left: 20rpx;
			}
		}
	}
	
	.register{
		width: 678rpx;
		height: 91rpx;
		line-height: 91rpx;
		background: linear-gradient(to right, rgba(19, 183, 163, 1.0), rgba(0, 131, 140, 1.0));
		margin-top: 44rpx;
		border-radius: 20rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	
</style>